import React from 'react';
import { Link, Switch, Route } from 'react-router-dom';
import Detail from './Detail';
export default class Message extends React.Component {
  state = {
    messageArr: [
      { id: '01', title: 'message001' },
      { id: '02', title: 'message002' },
      { id: '03', title: 'message003' }
    ]
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map(message => {
            return (
              <li key={message.id}>
                <Link to={`/home/message/detail/${message.id}/${message.title}`}>{message.title}</Link>
                {/* <a href={message.id}>{message.title}</a>&nbsp;&nbsp; */}
              </li>
            );
          })}
        </ul>
        <Switch>
          <Route path="/home/message/detail/:id/:title" component={Detail}></Route>
        </Switch>
      </div>
    );
  }
}
